<template>
  <div class="app-container background" style="padding: 0;">
    <screen-title style="padding-bottom: 20px;" v-if="showTitle" />
    <svg-icon v-else @click="toFullScreen" style="position: absolute;top:10px;right: 10px;fill: #fff;cursor: pointer;" icon-class="fullscreen" />
    <div class="top-title-border top-title-background">
      <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" class="query-form">
        <el-form-item prop="deptId" class="tree-sel">
          <treeselect v-model="queryForm.deptId" :options="deptOptions" placeholder="归属工厂" style="width: 160px;"
            :show-count="true" />
        </el-form-item>
        <el-form-item label="" prop="name">
          <el-input v-model="queryForm.name" placeholder="设备名称" clearable style="width: 160px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <i class="el-icon-search" @click="handleQuery" style="color: #C9C9C9;cursor: pointer;"></i>
        </el-form-item>
      </el-form>

    </div>
    <div style="width: 100%;" :style="{ height: showTitle ? 'calc(100% - 155px)' : 'calc(100% - 50px)' }">
      <el-row :gutter="10" style="padding:10px;margin: 0; width: 75%; height: 100%;float: left;">
        <el-col :span="8" v-for="(o, index) in deviceList" :key="o.id" style="margin-bottom: 20px;height: 28%;">
          <el-card class="device_card" @click.native="test(o.code)">
            <div slot="header" style="padding: 0;">
              <span style="letter-spacing: 2px;font-size: 16px;font-weight: normal;">{{ o.name }}</span>
              <dict-tag style="display: inline;margin-left: 30px;font-size: 14px;" :options="dict.type.oil_code"
                :value="o.oilCode" />
            </div>
            <div style="display: flex;position: relative;">
              <div style="position: absolute;top: -20px;left: 14px;font-size: 18px;">
                <svg-icon v-if="!o.onLine" icon-class="alarm" style="fill: grey;"></svg-icon>
                <svg-icon v-else-if="o.alarmCount == 0" icon-class="alarm" style="fill: springgreen;"></svg-icon>
                <svg-icon v-else icon-class="alarm" style="fill: red;"></svg-icon>
              </div>
              <img :src="prefix + o.devicePic" style="width: 130px;height: 90px;"></img>
              <div
                style="display: inline-block;width: 220px;vertical-align: top;line-height: 15px;word-break: break-all;margin-left: 10px;font-size: 14px;">
                <p><span style="font-weight: bold;">所属工厂：</span><span
                    style="display: inline-block;line-height: 20px;width: 130px;vertical-align: middle;overflow-x: hidden;">{{
                      o.deptName }}</span></p>
                <p><span style="font-weight: bold;">设备状态：</span><span
                    :style="{ color: o.onLine ? (o.alarmCount > 0 ? 'red' : 'springgreen') : 'grey' }">{{
                      o.onLine ? (o.alarmCount > 0 ? "报警" : o.stateName) : "离线" }}</span></p>
                <!-- <p><span style="font-weight: bold;">设备型号：</span>{{ device.deviceTypeName }}</p> -->
                <p><span style="font-weight: bold;">创建时间：</span>{{ o.createTime }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
        @pagination="getDeviceList" style="right: 25%;bottom: 5%;" />


      <div style="width: 25%; float: right;height: 100%;">
        <el-card class="box-card table" style="margin-top: 10px;">
          <div slot="header" class="box-title">
            设备总数：{{ deviceList.length }}
          </div>
          <dv-charts id="chart" :option="option" style="width: 100%;height:110%;position: relative;top:-10%" />
        </el-card>


        <el-card class="box-card table" style="margin-top:4% ">
          <div slot="header" class="box-title">设备异常运行统计</div>
          <dv-charts id="chart1" :option="optionAlarm" style="width: 100%;height:110%;position: relative;top:-10%" />
        </el-card>
        <el-card class="box-card table" style="margin-top:4% ">
          <div slot="header" class="box-title">
            报警信息
          </div>
          <dv-scroll-board :config="alarmDataConfig" style="width:100%;height:100%;" />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { listDevice } from "@/api/oil/device";
import { deptTreeSelect } from "@/api/system/user";
import { listRecord } from "../../../api/oil/record";
import { listDeviceAlarm } from "../../../api/oil/screenInfo";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import ScreenTitle from "../../dashboard/screenTitle.vue";
import { svrapi } from "../../../utils/request";

export default {
  name: "Rule",
  dicts: ['oil_alarm_type', 'oil_notic_type', 'oil_code', 'oil_alarm_level', 'oil_yes_no'],
  components: { Treeselect, ScreenTitle },
  data() {
    return {
      showTitle: true,
      currentDate: new Date(),
      tableData: [],
      //本页设备
      deviceList: [],
      //监测指标列表
      variableList: [],
      variableMap: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      name: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        industryType: null,
        deviceType: null,
        deptId: null,
        state: null,
        onLine: null,
      },
      // 查询参数
      queryParams: {
        state: null,
        id: null,
      },
      //表单数据
      form: { alarmRules: [] },
      userList: [],
      deptOptions: [],
      recordList: [],
      value: [],
      maxSelections: 2,
      recordList1: [],
      prefix: '',
      onLineCount: 0,
      offLineCount: 0,
      option: {},
      optionAlarm: {},
      optionConfig: {
        title: {
          text: ''
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            insideLabel: {
              show: true,
            },
            outsideLabel: {
              show: true,
              labelLineEndLength: 30,
              style: {
              }
            },
          }
        ]
      },
      alarmDataConfig: {},
      config: { header: ['设备名称', '报警原因', '报警时间'], columnWidth: [180, 180, 240], headerBGC: 'transparent', headerColor: '#fff', oddRowBGC: 'transparent', evenRowBGC: 'transparent', oddRowColor: '#fff', evenRowColor: '#fff' },
    };
  },
  created() {
    if (this.$route.path == '/deviceScreen/screen') {
      this.showTitle = false;
    }
    this.prefix = svrapi; // 设置图片前缀
    this.getDeptTree();
    this.getDeviceList();
    this.getList();
  },
  mounted() {
    // this.drawChart()
    // this.drawChart1()
  },
  methods: {
    toFullScreen() {
      this.$router.push({ path: '/' });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 查询设备管理列表 */
    getDeviceList() {
      listDevice(this.queryForm).then(response => {
        this.deviceList = response.rows;
        this.total = response.total;
        var offLineCount = 0;
        var onLineCount = 0;
        var alarmCount = 0;
        var nonAlarmCount = 0;
        var runningData = [];
        var alarmData = [];
        for (let i = 0; i < this.deviceList.length; i++) {
          if (this.deviceList[i].onLine == 0) {
            offLineCount++;
          } else {
            onLineCount++;
          }
          if (this.deviceList[i].alarmCount > 0) {
            alarmCount++;
          } else {
            nonAlarmCount++;
          }
        }
        if (this.deviceList != null && this.deviceList.length > 0) {
          runningData.push({ name: '在线', value: onLineCount });
          runningData.push({ name: '离线', value: offLineCount });
          alarmData.push({ name: '报警', value: alarmCount });
          alarmData.push({ name: '正常', value: nonAlarmCount });
        }else{
          runningData.push({ name: '在线', value: 0 });
          runningData.push({ name: '离线', value: 1 });
          alarmData.push({ name: '报警', value: 0 });
          alarmData.push({ name: '正常', value: 1 });
        }
        var config1 = _.cloneDeep(this.optionConfig);
        config1.series[0].data = runningData;
        this.option = config1;
        var config2 = _.cloneDeep(this.optionConfig);
        config2.series[0].data = alarmData;
        this.optionAlarm = config2;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getDeviceList();
      this.getList();
    },
    test(param) {
      console.log("clikced!");
      console.log(param);
      this.$router.push({ path: '/deviceDetails', query: { code: param } })
      // this.$router.push("/user")
    },
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      // if (null != this.daterangeCreateDate && "" != this.daterangeCreateDate) {
      //   this.queryParams.params["beginCreateDate"] =
      //     this.daterangeCreateDate[0];
      //   this.queryParams.params["endCreateDate"] = this.daterangeCreateDate[1];
      // }
      this.queryForm.deviceName = this.queryForm.name;
      listRecord(this.queryForm).then((response) => {

        //this.recordList = response.rows;
        this.alarmData = response.rows.map(obj => [obj.deviceName, obj.message, obj.lastOccurTime]);
        var config = _.cloneDeep(this.config);
        config.data = this.alarmData;
        this.alarmDataConfig = config;
        // this.total = response.total;
        this.loading = false;
      });
    }

  }
};
</script>
<style>
.info-box {
  float: right;
  margin: 10px;
}

.table-form .el-form-item {
  margin-bottom: 0;
}

.tree-sel .vue-treeselect__control {
  line-height: 24px;
  margin-top: 4px;
  border-radius: 4px;
  height: 24px;
}

.tree-sel .vue-treeselect__placeholder,
.tree-sel .vue-treeselect__single-value {
  line-height: 24px;
}

.container {
  display: flex;
}

.box {
  /*flex: 1;
  /* 根据需要调整 */
  margin-left: 20px;
  box-sizing: border-box;
  font-size: 20px;
  /* 包含padding和border在内计算宽度 */
}

.box-card {
  width: 96%;
  height: 31%;
}

.record-table .el-table__row:nth-of-type(odd) {
  background-color: transparent !important;
}

.record-table .el-table__row:nth-of-type(even) {
  background-color: transparent !important;
}

.device_card {
  height: 100%;
  position: relative;
}

.device_card .el-card__body {
  padding: 15px 5px;
}

.query-form {
  margin-left: 20px;
  display: inline-block;
}

.query-form.el-form--inline .el-form-item {
  margin-right: 20px;
}

.box-title {
  font-style: italic;
  letter-spacing: 0.1vw;
}

.table .dv-scroll-board .header {
  background: transparent;
  margin-top: 5px;
}

.table .el-card__header {
  padding: 20px 20px 5px;
}

.table .el-card__body {
  padding: 0px 5px;
  height: 80%;
}
</style>
